<div id="banner" class="banner">
	<div class="play-ctrl">
		<span class="pre" ng-click="arrowCtrl('pre')" ng-if="bannerFlag" ng-show="dirFlag"></span>
		<span class="next" ng-click="arrowCtrl('next')" ng-if="bannerFlag" ng-show="dirFlag"></span>
		<ul class="dot" ng-if="bannerFlag">
			<li ng-click="hoverDot($index)" ng-repeat="item in bannerList"></li>
		</ul>
		<div class="recruit-info">
			<h3>最新招聘:</h3>
			<div class="recruit-content">
				<ul>
					<li ng-repeat="item in recruitList track by $index"><span class="jobName" ng-bind="item.jobName" ui-sref="zpdetailCtrl({jobId:item.jobId})"></span><em ng-if="item.srName">，{{item.srName}}</em><em ng-if="item.dictName">，{{item.dictName}}</em><span class="time">{{item.createTime|dateFilter2}}</span></li>
					<li ng-repeat="item in recruitList track by $index"><span class="jobName" ng-bind="item.jobName" ui-sref="zpdetailCtrl({jobId:item.jobId})"></span><em ng-if="item.srName">，{{item.srName}}</em><em ng-if="item.dictName">，{{item.dictName}}</em><span class="time">{{item.createTime|dateFilter2}}</span></li>
				</ul>
			</div>
		</div>
	</div>
	<ul class="imgbox">
		<li ng-repeat="item in bannerList">
			<img src="{{item.logo}}">
			<div class="info-container" style="display: none">
				<div class="infoCount">
					<p><span style="margin-left: 10px;">工程社交</span>+<span>公司点评</span>+<span>招聘平台</span></p>
					<p><span>工程公司{{statistics.companyCount}}家</span><span>点评吐槽{{statistics.commentCount}}条</span><span>发布招聘{{statistics.jobCount}}次</span></p>
				</div>
			</div>
		</li>
		<li>
			<img src="{{bannerList[0].logo}}">
			<div class="info-container" style="display: none">
				<div class="infoCount">
					<p><span style="margin-left: 10px;">工程社交</span>+<span>公司点评</span>+<span>招聘平台</span></p>
					<p><span>工程公司{{statistics.companyCount}}家</span><span>点评吐槽{{statistics.commentCount}}条</span><span>发布招聘{{statistics.jobCount}}次</span></p>
				</div>
			</div>
		</li>
	</ul>
</div>
<style>
	em{
		font-style: normal;
	}
   	.banner{width:100%;height:380px;position: relative;overflow: hidden}
	.imgbox{height:380px;width:100%;overflow: hidden;position: absolute;top:0;left:0;overflow: hidden}
	body{
		width: 100%;
		height: auto;
		overflow-x: hidden;
	}
	.imgbox>li{position: relative;width:100%;height:380px;float: left;overflow: hidden}
	.imgbox img{width:1920px;height:380px;position: absolute;margin-left:-960px;left:50%;top:0}
	.info-container,.play-ctrl{
		width:1200px;
		height:380px;
		margin: 0 auto;
		position: relative;
	}
	.play-ctrl>span{
		display: block;
		width:26px;
		height:46px;
		position: absolute;
		top:50%;
		margin-top:-23px;
		cursor: pointer;
		z-index:2;
	}
	.play-ctrl>span.pre{
		left:-56px;
		background:url(them/imag/bigBanner-left-row.png);
	}
	.play-ctrl>span.next{
		right:-56px;
		background:url(them/imag/bigBanner-right-row.png);
	}
	.dot{
		font-size:0;
		z-index:2;
		position: absolute;
		left:50%;
		bottom:20px;
		line-height:19px;
	}
	.dot>li{
		width:8px;
		height:8px;
		display: inline-block;
		background: #808080;
		margin-left:14px;
		vertical-align: middle;
	}
	.dot>li.active{
		-webkit-animation:move 0.5s linear;
		-o-animation:move 0.5s ;
		animation: move 0.5s ;
		width:19px;
		height:19px;
		background:url("them/imgs/bannerIcon.png") no-repeat;
	}
	.dot>li:first-child{
		margin-left:0;
	}
	.recruit-info{
		width:210px;
		height:250px;
		position: absolute;
		top:45px;
		right:0px;
		background:#7e7e7d;
		padding:20px;
		z-index:2;
	}
	.recruit-info h3{
		font-size:14px;
		font-weight: normal;
		margin-bottom:12px;
	}
	.recruit-info .recruit-content{
		width:210px;
		height:224px;
		overflow: hidden;
		cursor: pointer;
	}
	.recruit-info li{
		height:56px;
		width:210px;
		line-height:28px;
		font-size:12px;
		position: relative;
	}
	.recruit-info li .jobName{
		color:#30a3ff;
	}
	.recruit-info li .time{
		position: absolute;
		bottom:5px;
		right:5px;
		color:#dddddd;
	}
    .infoCount{
    	position: absolute;
    	width: 500px;
    	color: #fff;
    	top: 68%;
    	left: 18%;
    	z-index: 100;
    }
    .infoCount p{
    	margin-bottom: 10px;
    }
    .infoCount p span{
    	margin: 0 20px;
    }
    .infoCount p:nth-of-type(1){
    	font-size: 14px;
    }
    .infoCount p:nth-of-type(2) span{
    	margin: 0 10px;
    	padding-left: 24px;
    }
    .infoCount p:nth-of-type(2) span:nth-of-type(1){
    	background: url(them/imag/depicon1.jpg) no-repeat left center;
    }
    .infoCount p:nth-of-type(2) span:nth-of-type(2){
    	background: url(them/imag/depicon2.jpg) no-repeat left center;
    }
    .infoCount p:nth-of-type(2) span:nth-of-type(3){
    	background: url(them/imag/depicon3.jpg) no-repeat left center;
    }
	@-webkit-keyframes move {
		from { transform:rotateZ(0);
			-ms-transform:rotateZ(0);
			-moz-transform:rotateZ(0);
			-webkit-transform:rotateZ(0);
			-o-transform:rotateZ(0);
		}
		to {
			transform:rotateZ(360deg);
			-ms-transform:rotateZ(360deg);
			-moz-transform:rotateZ(360deg);
			-webkit-transform:rotateZ(360deg);
			-o-transform:rotateZ(360deg);
		}
	}
	@-o-keyframes move {
		from { transform:rotateZ(0);
			-ms-transform:rotateZ(0);
			-moz-transform:rotateZ(0);
			-webkit-transform:rotateZ(0);
			-o-transform:rotateZ(0);
		}
		to {
			transform:rotateZ(360deg);
			-ms-transform:rotateZ(360deg);
			-moz-transform:rotateZ(360deg);
			-webkit-transform:rotateZ(360deg);
			-o-transform:rotateZ(360deg);
		}
	}
	@-moz-keyframes move {
		from { transform:rotateZ(0);
			-ms-transform:rotateZ(0);
			-moz-transform:rotateZ(0);
			-webkit-transform:rotateZ(0);
			-o-transform:rotateZ(0);
		}
		to {
			transform:rotateZ(360deg);
			-ms-transform:rotateZ(360deg);
			-moz-transform:rotateZ(360deg);
			-webkit-transform:rotateZ(360deg);
			-o-transform:rotateZ(360deg);
		}
	}
	@keyframes move {
		from { transform:rotateZ(0);
			-ms-transform:rotateZ(0);
			-moz-transform:rotateZ(0);
			-webkit-transform:rotateZ(0);
			-o-transform:rotateZ(0);
		}
		to {
			transform:rotateZ(360deg);
			-ms-transform:rotateZ(360deg);
			-moz-transform:rotateZ(360deg);
			-webkit-transform:rotateZ(360deg);
			-o-transform:rotateZ(360deg);
		}
	}
</style>